<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
                xmlns:sf="http://www.springframework.org/tags/faces"
                xmlns:cs="http://myfaces.apress.com/custom"
				template="/WEB-INF/layouts/standard.xhtml"
				xmlns:a4j="http://richfaces.org/a4j"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:c="http://java.sun.com/jstl/core"
			>

	<ui:define name="headIncludes">
	
		<script type="text/javascript">
		
			var childW = null;

			function launchChildW() {
				
			  var url = "${request.contextPath}/webcam.jsp";
			   
			  wopts  = 'width=300,height=300,resizable=1,alwaysRaised=1,scrollbars=1,modal=yes';
	
			  if (window.showModalDialog) {
					window.showModalDialog(url,self,wopts);
				} else {
					window.open(url,'Popup',wopts);
				}
			}

			function setImage(im) {
				var ee = document.getElementById('snap');
				while (ee.hasChildNodes()) {
			        ee.removeChild(ee.firstChild);
			    }			   
	            var element1 = document.createElement("img");
	            element1.src = "${request.contextPath}/" + im;
	            element1.id = "imgctrl";
	            element1.alt = "No Protograph";
	            element1.width= 320;
	            element1.height=240; 
	            ee.appendChild(element1);
	            document.getElementById('${model}form:imgControl').value="${request.contextPath}/" + im;
			}

			function showLarge(ev,tar,url) {
				var ee = document.getElementById('imageLarged');
				ee.style.left = (ev.pageX + 50)+"px";
				ee.style.top = (ev.pageY - 120 )+"px";
		        ee.src=url; 
				ee.style.visibility="visible";				
			}
			
			function hideLarge() {
				var ee = document.getElementById('imageLarged');
		        ee.src="";
				ee.style.visibility="hidden";
			}
			
		</script>
		
	</ui:define>

	<ui:define name="content">	
	
			<h2>${model}s</h2>
			<h:form id="${model}form">															
				<h:messages errorClass="errors" />		
				<fieldset>
					<div class="field">
						<div class="label">
							Photograph <c:if test="${not editing}">
								<a href="#" onclick="launchChildW()">								
									<img src="${request.contextPath}/webcam/camera_icon.gif" alt="click"/></a>
								</c:if>	
						</div>
						<div class="input">							
							<div id='snap'>
								<img id="imgctrl" src="" alt="No Photograph"/>							
							</div>						
						</div>
						<c:choose>
							<c:when test="#{editing}">
								<h:inputHidden id="imgControl" value="#{patientImage}"/>
							</c:when>
							<c:otherwise>
								<h:inputHidden id="imgControl" value="#{patientImage}" required="true" requiredMessage="Photograph is required !"/>
							</c:otherwise>
						</c:choose>
					</div>
					<div class="field">
						<div class="label">First Name:</div>
						<div class="input">
							<sf:clientTextValidator required="true">
								<h:inputText required="true" requiredMessage="First Name is required !" id="fname" value="#{patient.firstName}">
									<rich:beanValidator />
								</h:inputText>
							</sf:clientTextValidator>						
						</div>
					</div>
					<div class="field">
						<div class="label">Middle Name:</div>
						<div class="input">
							<h:inputText id="mname" value="#{patient.middleName}">
								<rich:beanValidator />
							</h:inputText>
						</div>
					</div>
					<div class="field">
						<div class="label">Last Name:</div>
						<div class="input">
							<sf:clientTextValidator required="true">
								<h:inputText required="true" requiredMessage="Last Name is required !" id="lname" value="#{patient.lastName}">
									<rich:beanValidator />
								</h:inputText>
							</sf:clientTextValidator>						
						</div>
					</div>
					<div class="field">
						<div class="label">Address:</div>
						<div class="input">
							<sf:clientTextValidator required="true">
								<h:inputText required="true" requiredMessage="Address is required !" id="adrname" value="#{patient.address}">
									<rich:beanValidator />
								</h:inputText>
							</sf:clientTextValidator>						
						</div>
					</div>				
					<div class="field">
						<div class="label">Gender:</div>
						<div class="input">
							<h:selectOneRadio value="#{patient.sex}" required="true" requiredMessage="Gender is required">
								<f:selectItem itemLabel="Male" itemValue="M"/>
								<f:selectItem itemLabel="Female" itemValue="F"/>
								<rich:beanValidator />
							</h:selectOneRadio>						
						</div>
					</div>		
					<div class="field">
						<div class="label">ID Card Type</div>
						<div class="input">
							<rich:comboBox 	required="true" 
											requiredMessage="ID Card Type is required !" 
											id="patientIdCard" 
											value="#{patient.idCardType}"
											suggestionValues="#{idCardTypes}"
											converter="#{idCardTypeConverter}"
											enableManualInput="false">								
							</rich:comboBox>
						</div>
					</div>
					<div class="field">
						<div class="label">ID Card Number:</div>
						<div class="input">
							<sf:clientTextValidator required="true">
								<h:inputText required="true" requiredMessage="ID Card Number is required !" id="idcardname" value="#{patient.idCardNumber}">
									<rich:beanValidator />
								</h:inputText>
							</sf:clientTextValidator>						
						</div>
					</div>
					<div class="field">
						<div class="label">Phone Number:</div>
						<div class="input">
							<sf:clientTextValidator required="true">
								<h:inputText required="true" requiredMessage="Phone Number is required !" 
								id="phoneNumber" value="#{patient.phone}">
									<rich:beanValidator />
								</h:inputText>
							</sf:clientTextValidator>						
						</div>
					</div>
					<div class="field">
						<div class="label">Profession</div>
						<div class="input">
							<rich:comboBox 	required="true" 
											requiredMessage="Profession is required !" 
											id="profession"
											value="#{patient.profession}"
											suggestionValues="#{professions}"
											converter="#{professionConverter}"
											enableManualInput="false">								
							</rich:comboBox>
						</div>
					</div>	
					<div class="buttonGroup" style="text-align: center;">
						<sf:validateAllOnClick>
							<h:commandButton disabled="#{editing}" id="submit" action="add" value="Add"/>&#160;
							<h:commandButton disabled="#{!editing}" action="update" value="Update"/>&#160;
						</sf:validateAllOnClick>
						<h:commandButton id="cancel" immediate="true" value="Cancel" action="cancel"/>
					</div>		
				</fieldset>	
				<div ></div>
				
				<rich:dataTable value="${patients}" var="aBean" align="center">
						<f:facet name="header">
							<h:outputText value="All ${model}s"/>
						</f:facet>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Edit" />
							</f:facet>							
							<h:commandButton title="#{editing ? 'Edit already in progress...':'Click to Edit'}" image="/resrc/images/edit1.jpg" disabled="#{editing}" immediate="true" 
							style="width:15px;height:15px;#{editing ? 'cursor: not-allowed':''}" action="select"/>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Delete" />
							</f:facet>							
							<h:commandButton title="#{editing ? 'Edit is in progress, please complete the editing...':'Click to Delete'}" image="/resrc/images/cross1.jpg" 
							style="width:15px;height:15px;#{editing ? 'cursor: not-allowed':''}" 
							disabled="#{editing}" immediate="true"  action="delete"
							onclick="if(!showConfirmation('Are you sure to remove Patient #{aBean.firstName} #{aBean.middleName} #{aBean.lastName} ?')) return false;"/>
						</rich:column>
						<rich:column>
							<f:facet name="header">Name</f:facet>
							<h:outputText value="#{aBean.lastName}, #{aBean.firstName} #{aBean.middleName} "/>
						</rich:column>	
						<rich:column style="text-align:center" >
							<f:facet  name="header">Photograph</f:facet>
							<h:graphicImage width="50" height="37" url="/bss/images/saved?id=#{aBean.id}"
								onmouseout="hideLarge()" style="border-width: 1px; border-style:solid; border-color:black;"
								onmouseover="showLarge(event,this,'#{request.contextPath}/bss/images/saved?id=#{aBean.id}');"/>
						</rich:column>	
						<f:facet name="footer">
							<h:outputText value="#{patients.rowCount > 0 ? '':'No patients available...'}" />
						</f:facet>							
				</rich:dataTable>	
			</h:form>
			<img id="imageLarged" src="" width="320" height="240" 
				alt="No Image" style="position:absolute; visibility: hidden; border-width: 2px; border-style:solid; border-color:red;"/>
			<script type="text/javascript">
				//Lets load the selected photograph
				try {
					if(!${editing}) { 			
			 			document.getElementById('imgctrl').src=document.getElementById('${model}form:imgControl').value;
					} else {
						document.getElementById('imgctrl').src="${request.contextPath}"+ document.getElementById('${model}form:imgControl').value;
					}
				} catch(e) {
					alert("Error while setting photograph..."+e);
				}
			</script>			
	</ui:define>
</ui:composition>